
<template>
  <div class="dashboard-container">
    <el-drawer ref="drawer" size="60%" title="维护模块" :visible.sync="showDialog" :wrapper-closable="true" @close="close">
      <div style="padding:20px;">
        <el-button
          style="margin: 10px 0;"
          type="primary"
          @click="addType()"
        >
          新增分类
        </el-button>
        <div style="height:calc(100vh - 150px);overflow:auto">
          <el-table
            :data="typeList"
            style="width: 100%;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column
              prop="name"
              label="分类名称"
            />
            <!-- <el-table-column
            prop="name_short"
            label="简称"
            width="150"
          /> -->
            <el-table-column
              label="操作"
              align="right"
              width="180"
              class-name="small-padding fixed-width"
              fixed="right"
            >
              <template slot-scope="{ row }">
                <el-button
                  size="mini"
                  type="primary"
                  @click="edit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  @click="delet(row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </el-drawer>

    <el-dialog
      title="分类维护"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div style="padding: 20px">
        <el-input v-model="name" placeholder="请输入分类名称" />

        <el-cascader
          v-if="dialogType == 1"
          v-model="typeChooseList"
          style="width:100%;margin-top:10px"
          :options="typeList"
          :props="{ checkStrictly: true, label: 'name',
                    value: 'id',
                    children: 'children' }"
          clearable
          placeholder="请选择所属分类,不传则为最上层"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="dialogType == 1" type="primary" @click="submitAdd()">确 定</el-button>
        <el-button v-if="dialogType == 2" type="primary" @click="submitEdit()">保 存</el-button>

      </span>
    </el-dialog>

  </div>
</template>

<script>
import { goodsListCate, goodsAddGoodsClass, DelGoodsCategory, UpdateGoodsCategory } from '@/api/base/goods'

export default {
  name: 'Detial',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    typeList: {
      require: false,
      type: Array,
      default: () => {

      }
    },
    status: {
      type: Number,
      default: 1
    }
  },

  data() {
    return {
      name: '',
      showDialog: false,
      dialogVisible: false,
      typeChooseList: [],
      pid: '',
      dialogType: 1,
      editId: ''
    }
  },
  watch: {
    visible(val) {
      this.showDialog = this.visible
    }
  },
  mounted() {

  },
  methods: {
    delet(row) {
      this.$confirm('此操作将删除该分类及其下级, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelGoodsCategory({
          id: row.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getCateList()
          this.$emit('reLoad')
        })
      }).catch(() => {

      })
    },
    edit(row) {
      this.dialogType = 2
      this.name = row.name
      this.editId = row.id
      this.dialogVisible = true
    },
    getCateList() {
      goodsListCate().then(res => {
        this.typeList = res.data.list
      })
    },
    close() {
      this.$emit('update', false)
    },
    addType() {
      this.dialogType = 1
      this.name = ''
      this.typeChooseList = []
      this.dialogVisible = true
    },
    submitAdd() {
      if (this.typeChooseList.length) {
        this.pid = this.typeChooseList[this.typeChooseList.length - 1]
      } else {
        this.pid = 0
      }

      goodsAddGoodsClass({
        name: this.name,
        pid: this.pid
      }).then(res => {
        this.$message.success('新增成功')
        this.dialogVisible = false
        this.getCateList()
        this.$emit('reLoad')
      })
    },
    submitEdit() {
      UpdateGoodsCategory({
        name: this.name,
        id: this.editId
      }).then(res => {
        this.$message.success('编辑成功')
        this.dialogVisible = false
        this.getCateList()
        this.$emit('reLoad')
      })
    }
  }

}
</script>
<style scoped>
.detial{
  padding:40px 40px 20px 20px;
}
.buttons{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
</style>
